<!--
 * @Author: awada 10254500+awadaawada@user.noreply.gitee.com
 * @Date: 2022-10-12 19:11:37
 * @LastEditors: awada 10254500+awadaawada@user.noreply.gitee.com
 * @LastEditTime: 2022-10-13 11:02:41
 * @FilePath: \JavaScriptd:\Briup\实训三\项目\第三个项目\点单项目\HeyTea_project\HeyTea-ui\src\pages\components\zhexianChart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container" />
</template>
<script>
import { Chart } from '@antv/g2'

export default {
  mounted() {
    this.getChart1()
  },
  methods: {
    getChart1() {
      fetch('https://gw.alipayobjects.com/os/antfincdn/C34i0tIT1U/linedata.json')
        .then((data) => data.json())
        .then((data) => {
          const chart = new Chart({
            container: 'container',
            autoFit: true,
            height: 90
          })

          chart.data(data)
          chart.scale('year', {
            type: 'linear',
            tickInterval: 50
          })
          chart.scale('value', {
            nice: true
          })

          chart.tooltip({
            showCrosshairs: true,
            shared: true
          })

          chart.area().adjust('stack').position('year*value').color('country')
          chart.line().adjust('stack').position('year*value').color('country')

          chart.interaction('element-highlight')
          // 复写 图例筛选 交互。1、点击图例名称 进行 unchecked 状态的切换 2、点击图例 marker，进行 checked 状态的切换（进行聚焦）3、双击 重置状态
          chart.interaction('legend-filter', {
            start: [
              { trigger: 'legend-item-name:click', action: ['list-unchecked:toggle', 'data-filter:filter'] },
              { trigger: 'legend-item-marker:click', action: ['list-checked:checked', 'data-filter:filter'] }
            ],
            end: [{ trigger: 'legend-item-marker:dblclick', action: ['list-checked:reset', 'data-filter:filter'] }]
          })
          chart.axis(false)
          chart.render()
        })
    }
  }
}
</script>
